<template>
  <span class="time-roll">{{newTime}}</span>
</template>
<script>
var icnow = new Date();      // 初始化时间
var interval;                // 定义全局定时器，用于清除定时器
export default {
  name: "TimeRoll",
  data () {
    return {
      year: icnow.getFullYear(),
      month: icnow.getMonth() + 1,
      date: icnow.getDate(),
      time: icnow.toTimeString().substring(0, 8)
    }
  },
  created () {
    interval = setInterval(() => {
      let icnow = new Date();
      this.year = icnow.getFullYear();
      this.month = icnow.getMonth() + 1;
      this.date = icnow.getDate();
      this.time = icnow.toTimeString().substring(0, 8);
    }, 1000)
  },
  computed: {
    // 当前时间
    newTime: function () {
      const month = this.month > 9 ? this.month : '0' + this.month
      const date = this.date > 9 ? this.date : '0' + this.date
      return `${this.year}-${month}-${date} ${this.time}`
    }
  },
  beforeDestroy () {
    clearInterval(interval);
  }
}
</script>
<style scoped lang="scss">
.time-roll {
  background-image: linear-gradient(rgb(243, 254, 255), rgb(255, 255, 255) 52%, rgb(146, 223, 255) 52%, rgb(232, 251, 255));
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-size: 25px;
}
</style>